<template>
  <div class="order-management">
    <a-card title="订单管理" :bordered="false">
      <a-table
        :columns="columns"
        :data-source="orderList"
        :loading="loading"
        :pagination="{ pageSize: 10 }"
        row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'orderType'">
            {{ getOrderTypeText(record.orderType) }}
          </template>
          <template v-else-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'amount'">
            ¥{{ record.amount }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button size="small" @click="showOrderDetail(record)">
                订单详情
              </a-button>
              <a-button
                v-if="record.status === 0"
                size="small"
                type="primary"
                @click="handlePay(record.id)"
              >
                立即支付
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 订单详情模态框 -->
    <a-modal
      v-model:visible="detailVisible"
      title="订单详情"
      width="700px"
      :footer="null"
    >
      <a-descriptions bordered :column="2" v-if="currentOrder">
        <a-descriptions-item label="订单编号">
          {{ currentOrder.orderNo }}
        </a-descriptions-item>
        <a-descriptions-item label="订单类型">
          {{ getOrderTypeText(currentOrder.orderType) }}
        </a-descriptions-item>
        <a-descriptions-item label="金额">
          ¥{{ currentOrder.amount }}
        </a-descriptions-item>
        <a-descriptions-item label="支付方式">
          {{ getPaymentMethodText(currentOrder.paymentMethod) }}
        </a-descriptions-item>
        <a-descriptions-item label="订单状态">
          <a-tag :color="getStatusColor(currentOrder.status)">
            {{ getStatusText(currentOrder.status) }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="交易ID">
          {{ currentOrder.transactionId || '无' }}
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">
          {{ currentOrder.createTime }}
        </a-descriptions-item>
        <a-descriptions-item label="支付时间">
          {{ currentOrder.paymentTime || '未支付' }}
        </a-descriptions-item>
        <a-descriptions-item label="过期时间">
          {{ currentOrder.expireTime }}
        </a-descriptions-item>
        <a-descriptions-item label="描述" :span="2">
          {{ currentOrder.description }}
        </a-descriptions-item>
      </a-descriptions>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import  {findAllOrders } from '@/api/bizOrderController'

const loading = ref(false)
const detailVisible = ref(false)
const currentOrder = ref<BizOrder | null>(null)
const orderList = ref<BizOrder[]>([])

const columns = [
  {
    title: '订单编号',
    dataIndex: 'orderNo',
    key: 'orderNo',
    width: 180,
  },
  {
    title: '订单类型',
    dataIndex: 'orderType',
    key: 'orderType',
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
    align: 'right',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 120,
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 180,
  },
  {
    title: '操作',
    key: 'action',
    width: 180,
  },
]

// 获取订单列表
const fetchOrders = async () => {
  loading.value = true
  try {
    // 这里替换为你的实际API调用
    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
    const {data} = await findAllOrders({userId:userInfo.userId})

    if (data.code === 0) {
      orderList.value = data.data
    } else {
      message.error('获取订单列表失败')
    }
  } catch (error) {
    message.error('请求失败')
  } finally {
    loading.value = false
  }
}

// 订单类型映射
const getOrderTypeText = (type: number) => {
  const types = {
    0: '入队费',
    1: '订阅费',
    2: '平摊费用',
    3: '其他费用',
  }
  return types[type] || type
}

// 支付方式映射
const getPaymentMethodText = (method: number) => {
  const methods = {
    1: '支付宝',
    2: '微信',
    3: '银行卡',
    4: '其他',
  }
  return methods[method] || method
}

// 状态颜色
const getStatusColor = (status: number) => {
  const colors = {
    0: 'orange', // 待支付/已取消
    1: 'green', // 已支付
    2: 'red', // 失败
    3: 'blue', // 已退款
  }
  return colors[status] || 'default'
}

// 状态文本
const getStatusText = (status: number) => {
  const statusMap = {
    0: '待支付',
    1: '已支付',
    2: '支付失败',
    3: '已退款',
  }
  return statusMap[status] || status
}

// 显示订单详情
const showOrderDetail = (order: BizOrder) => {
  currentOrder.value = order
  detailVisible.value = true
}

// 支付订单
const handlePay = (orderId: number) => {
  message.info(`支付订单: ${orderId}`)
  // 这里添加支付逻辑
}

onMounted(() => {
  fetchOrders()
})
</script>

<style scoped>
.order-management {
  padding: 24px;
  background: #fff;
}
</style>
